<template>
  <div class="blog-create">
    <div class="blog-create-title">
      <a-input v-model="form.title" placeholder="请输入标题" />
      <a-dropdown>
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item v-for="item in categories" :key="item">{{ item.type }}</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> {{ form.currentCategory ? form.currentCategory.type : '选择类型' }} <a-icon type="down" /> </a-button>
      </a-dropdown>
    </div>

    <a-input v-model="form.subDescription" placeholder="请输入标题" class="des" />
    <mavon-editor ref="md" v-model="form.description" class="mavon-content" @imgAdd="$imgAdd"/>
    <a-button type="primary" @click="coverShow = true"> 创建 / 更新 </a-button>
    <a-modal title="上传主图" :visible="coverShow" :confirm-loading="confirmLoading" @ok="submit" @cancel="coverShow = false">
      <div style="margin-bottom: 20px">主图：</div>

      <a-upload
        name="file"
        list-type="picture-card"
        class="avatar-uploader"
        :show-upload-list="false"
        action="/api/upload/image"
        :before-upload="beforeUpload"
        @change="handleChange"
        :data="{ folder: 'cover' }"
      >
        <img v-if="form.cover" :src="form.cover" alt="avatar" style="width: 100%; height: auto"/>
        <div v-else>
          <a-icon :type="loading ? 'loading' : 'plus'" />
        </div>
      </a-upload>

      <a-input placeholder="地址" v-model="form.cover" />
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: '',
        description: '',
        subDescription: '',
        currentCategory: null,
        cover: ''
      },
      categories: [],
      uuid: '',
      coverShow: false,
      loading: false,
      confirmLoading: false
    }
  },
  created() {
    this.getCategory()
    if (this.$route.query.uuid) {
      this.uuid = this.$route.query.uuid
      this.getBlogDetail(this.$route.query.uuid)
    }
  },
  methods: {
    // 获取类型
    getCategory() {
      this.$api.getType().then((res) => {
        if (res.code === 1) {
          this.categories = res.data
        }
      })
    },

    // 获取详情
    getBlogDetail(uuid) {
      this.$api.getBlogDetail({ uuid }).then((res) => {
        if (res.code === 1) {
          this.form.title = res.data.title
          this.form.description = res.data.description
          this.form.subDescription = res.data.sub_description
          this.form.currentCategory = this.categories.find((item) => item.id == res.data.type_id)
          this.form.cover = res.data.cover
        }
      })
    },

    // 设置博客类型
    handleMenuClick(e) {
      this.form.currentCategory = e.key
    },

    // 上传图片
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        this.loading = false
        this.form.cover = info.file.response.data
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },

    // 提交
    submit() {
      const { title, subDescription, currentCategory, description } = this.form
      if (!currentCategory) {
        console.log(this.$refs.md)
        return this.$message.error('未选择博客分类')
      }
      let data = {
        title,
        description: description,
        description_html: this.$refs.md.d_render,
        type_id: currentCategory.id,
        sub_description: subDescription,
        uu_id: this.uuid,
        cover: this.form.cover
      }
      this.$api.setBlog(data).then((res) => {
        if (res.code === 1) {
          this.$message.success(res.message)
          this.form = {
            title: '',
            description: '',
            subDescription: '',
            currentCategory: null,
            cover: ''
          }
          this.coverShow = false
          this.loading = false
          this.confirmLoading = false
          this.$router.replace('/blog')
        }
      })
    },

    // 图片添加
    $imgAdd(pos, $file) {
      // 第一步.将图片上传到服务器.
      let formData = new FormData();
      formData.append('file', $file);
      formData.append('folder', 'editor');
      this.$api.uploadImage(formData).then((res) => {
        if(res.code === 1) {
          let _res = res.data;
          // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
          this.$refs.md.$img2Url(pos, _res);
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.blog-create {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 50px;

  .blog-create-title {
    display: flex;
  }

  .mavon-content {
    flex: 1;
    margin: 10px 0;
  }

  .des {
    margin-top: 10px;
  }
}
</style>
